<template>
    <div class="header-content">
        <el-form id="header-query" label-width="120px" style="width:90%" ref="searchParam" :model="searchParam">
            <el-form-item label="产品代码/名称" prop="fundCode">
                <RiskEntryInput @set-entry-data="getAccountDebarValue" :returnDatas="searchParam.fundCode" />
                <!-- <RiskEntryInputs :showAll="false" @set-entry-data="getAccountDebarValue" :showDis="false" :returnDatas="searchParam.fundCode" /> -->
            </el-form-item>
            <el-form-item label="证券代码/名称" prop="stockCode">
                <el-select
                    v-model="searchParam.stockCode"
                    filterable
                    clearable
                    remote
                    :remote-method="getStockCodeList"
                    @clear="getStockCodeList('')"
                    @visible-change="handleStockVisibleChange"
                    :loading="selectLoading"
                    size="mini"
                    style="width:100%"
                >
                    <el-option v-for="item in stockCodes" :key="item.dictKey" :label="item.dictKey + ' ' + item.dictKeyName" :value="item.dictKey">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="存款银行" prop="bankCode" label-width="105px">
                <el-select
                    v-model="searchParam.bankCode"
                    filterable
                    clearable
                    remote
                    :remote-method="getBankCodeList"
                    @clear="getBankCodeList('')"
                    @visible-change="handleBankVisibleChange"
                    :loading="selectLoading"
                    size="mini"
                    style="width:100%"
                >
                    <!-- multiple
                    collapse-tags -->
                    <el-option v-for="item in bankCodeTypes" :key="item.dictKey" :label="item.dictKey + ' ' + item.dictKeyName" :value="item.dictKey">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="交易对手" prop="opponentCode" label-width="105px">
                <el-select
                    v-model="searchParam.opponentCode"
                    size="mini"
                    filterable
                    clearable
                    remote
                    :remote-method="getOpponentCodeList"
                    @clear="getOpponentCodeList('')"
                    @visible-change="handleOpponentVisibleChange"
                    :loading="selectLoading"
                    style="width:100%"
                >
                    <el-option
                        v-for="item in opponentCodeTypes"
                        :key="item.dictKey"
                        :label="item.dictKey + ' ' + item.dictKeyName"
                        :value="item.dictKey"
                    >
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="操作者" prop="userNo">
                <el-select v-model="searchParam.userNo" filterable clearable size="mini">
                    <el-option v-for="item in orderUsers" :key="item.dictKey" :value="item.dictCode" :label="item.dictKey + ' ' + item.dictKeyName">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="操作日期" prop="time">
                <el-date-picker
                    v-model="searchParam.time"
                    type="daterange"
                    size="mini"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    @change="changeTime"
                    style="width:100%"
                    value-format="yyyyMMdd"
                    format="yyyy-MM-dd"
                >
                </el-date-picker>
            </el-form-item>
            <el-form-item label="关联原因" prop="relation" label-width="105px">
                <el-select v-model="searchParam.relation" size="mini" filterable>
                    <el-option v-for="item in relationOptions" :key="item" :value="item" :label="item"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="关联主体" prop="issueName" label-width="105px">
                <el-input v-model="searchParam.issueName" size="mini"></el-input>
            </el-form-item>
        </el-form>
        <div class="btn">
            <el-button @click="handleReset">重置</el-button>
            <el-button type="primary" @click="handleSelect">查询</el-button>
        </div>
    </div>
</template>
<script lang="ts">
import RiskEntryInput from '@/common/components/risk-entry-input.vue';
import RiskEntryInputs from '@/common/components/risk-entry-inputs.vue';
import { Component, Vue } from 'vue-property-decorator';

@Component({
    name: 'RelationTransactionQueryHistoryCondition',
    components: { RiskEntryInputs, RiskEntryInput },
})
export default class RelationTransactionQueryHistoryCondition extends Vue {
    searchParam: any = {
        bankCode: '',
        fundCode: '',
        opponentCode: '',
        stockCode: '',
        userNo: '',
        startTime: '',
        endTime: '',
        relation: '',
        issueName: '',
        time: '',
    };
    selectLoading: boolean = false;

    stockCodes: any[] = []; // 证券代码

    bankCodeTypes: any[] = [];

    opponentCodeTypes: any[] = [];

    orderUsers: any[] = []; // 下单人下拉列表

    relationOptions: any[] = [
        '关联证券发行人',
        '关联原始权益人',
        '关联承销商',
        '关联存款银行',
        '关联交易对手',
        '关联管理人',
        '关联财务顾问',
        '关联发行人股东（5%以上）',
        '关联投标机构',
    ];

    async mounted() {
        // 证券代码;
        await this.getStockCodeList('');

        // 交易对手方;
        await this.getOpponentCodeList('');

        // 存款银行
        await this.getBankCodeList('');

        // 下单人下拉列表
        this.$axios.post('instruction/user/select').then((res: any) => {
            this.orderUsers = res;
        });
    }

    handleReset() {
        (this.$refs.searchParam as any).resetFields();
        this.searchParam.startTime = '';
        this.searchParam.endTime = '';
    }

    handleSelect() {
        this.$emit('handleTrailHistory', this.searchParam);
    }

    // 证券代码
    getStockCodeList(e: string) {
        this.selectLoading = true;
        return new Promise((resolve, reject) => {
            this.$axios
                .post('/dict/stock/select', {
                    dictKey: e,
                    dictKeyName: e,
                })
                .then((res: any) => {
                    this.stockCodes = res;
                    this.selectLoading = false;
                    resolve(res);
                })
                .catch(err => {
                    this.selectLoading = false;
                    reject(err);
                });
        });
    }

    // 存款银行
    getBankCodeList(e) {
        this.selectLoading = true;
        return new Promise((resolve, reject) => {
            this.$axios
                .post('/dict/bank/select', {
                    dictKey: e,
                    dictKeyName: e,
                })
                .then((res: any) => {
                    this.bankCodeTypes = res;
                    this.selectLoading = false;
                    resolve(res);
                })
                .catch(err => {
                    this.selectLoading = false;
                    reject(err);
                });
        });
    }

    // 交易对手方
    getOpponentCodeList(e: string) {
        this.selectLoading = true;
        return new Promise((resolve, reject) => {
            this.$axios
                .post('/dict/opponent/select', {
                    dictKey: e,
                    dictKeyName: e,
                })
                .then((res: any) => {
                    this.opponentCodeTypes = res;
                    this.selectLoading = false;
                    resolve(res);
                })
                .catch(err => {
                    this.selectLoading = false;
                    reject(err);
                });
        });
    }

    // 交易对手方
    async handleOpponentVisibleChange(isShow: boolean) {
        if (!isShow && this.opponentCodeTypes.length < 1) {
            await this.getOpponentCodeList('');
        }
    }

    // 银行
    async handleBankVisibleChange(isShow: boolean) {
        if (!isShow && this.bankCodeTypes.length < 1) {
            await this.getBankCodeList('');
        }
    }

    // 证券代码
    async handleStockVisibleChange(isShow: boolean) {
        if (!isShow && this.stockCodes.length < 1) {
            await this.getStockCodeList('');
        }
    }

    // 产品代码
    getAccountDebarValue(val: any) {
        this.searchParam.fundCode = val;
    }

    // 操作日期改变
    changeTime(time: any) {
        this.searchParam.startTime = time[0] || '';
        this.searchParam.endTime = time[1] || '';
        console.log(this.searchParam.startTime, this.searchParam.endTime, 'time');
    }
}
</script>
<style lang="scss" scoped>
.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 10px 15px 0;
    background-color: #fff;
    .btn {
        display: grid;
        row-gap: 10px;
    }
}
#header-query {
    display: grid;
    grid-template-columns: 1fr 1.3fr 1fr 1fr;
    /deep/ .el-form-item {
        margin-bottom: 4px;
        .el-form-item__label {
            color: black;
            padding-right: 2px;
        }
    }
}

/deep/ span.el-tag.el-tag--info.el-tag--mini.el-tag--light {
    display: flex;
    align-items: center;
    width: 65%;
    max-width: fit-content;
    padding-right: 5px;
    padding-left: 0px;
    margin: 2px 0 2px 2px;
    .el-select__tags-text {
        display: inline-block;
        font-size: 12px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}
/deep/ .el-select__tags {
    flex-wrap: nowrap;
}
/deep/ .el-button + .el-button {
    margin-left: 0;
}
/deep/ .el-date-editor .el-range-separator {
    padding: 0 15px 0 0px;
}
</style>
